<template>
  <div class="center" style="height: calc(100% - 50px)">
    <el-container style="height: calc(100%)">
      <el-aside
        :width="this.$store.state.collapse.isCollapse ? 'auto' : '230px'"
        style="height: calc(100% - 40px)"
      >
        <el-menu
          router
          :default-active="$route.path"
          :collapse-transition="false"
          class="el-menu-vertical-demo"
          :collapse="this.$store.state.collapse.isCollapse"
          style="overflow: hidden"
        >
          <el-menu-item index="/home/echarts">
            <i class="el-icon-bangzhu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="/kucun">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>库存管理</span>
            </template>
            <el-menu-item-group>
              <el-submenu index="/inku">
                <template slot="title">入库管理</template>
                <el-menu-item index="/home/kucun/inku/caigou"
                  >采购入库</el-menu-item
                >
                <el-menu-item index="/home/kucun/inku/tuichu"
                  >采购退货出库</el-menu-item
                >
                <el-menu-item index="/home/kucun/inku/panying"
                  >盘盈入库</el-menu-item
                >
                <el-menu-item index="/home/kucun/inku/zhangku"
                  >涨库入库</el-menu-item
                >
                <el-menu-item index="/home/kucun/inku/qita"
                  >其他入库</el-menu-item
                >
              </el-submenu>
              <el-submenu index="/outku">
                <template slot="title">出库管理</template>
                <el-menu-item index="/home/kucun/outku/chuku"
                  >销售出库</el-menu-item
                >
                <el-menu-item index="/home/kucun/outku/tuihuoku"
                  >销售退货入库</el-menu-item
                >
                <el-menu-item index="/home/kucun/outku/pankui"
                  >盘亏出库</el-menu-item
                >
                <el-menu-item index="/home/kucun/outku/qita"
                  >其他出库</el-menu-item
                >
              </el-submenu>
              <el-menu-item index="/home/kucun/tiaobo">
                <span>库存调拨</span>
              </el-menu-item>
              <el-menu-item index="/home/kucun/tiaozheng">
                <span>成本调整</span>
              </el-menu-item>
              <el-menu-item index="/home/kucun/pandiam">
                <span>库存盘点</span>
              </el-menu-item>
              <el-menu-item index="/home/kucun/shisi">
                <span>实时库存</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/wanglai">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span>往来管理</span>
            </template>
            <el-menu-item-group>
              <el-submenu index="/shoukuan">
                <template slot="title">收款管理</template>
                <el-menu-item index="/home/wanglai/shoukuan/yushou"
                  >销售预收</el-menu-item
                >
                <el-menu-item index="/home/wanglai/shoukuan/shoukun"
                  >销售收款</el-menu-item
                >
                <el-menu-item index="/home/wanglai/shoukuan/qita"
                  >其他收款</el-menu-item
                >
              </el-submenu>
              <el-submenu index="/wanglai/caigou">
                <template slot="title">采购管理</template>
                <el-menu-item index="/home/wanglai/CaiGou/yushou"
                  >采购预付</el-menu-item
                >
                <el-menu-item index="/home/wanglai/CaiGou/fukuan"
                  >采购付款</el-menu-item
                >
                <el-menu-item index="/home/wanglai/CaiGou/qita"
                  >其他付款</el-menu-item
                >
              </el-submenu>
              <el-submenu index="/wanglai/fapiao">
                <template slot="title">发票登记</template>
                <el-menu-item index="/home/wanglai/FaPiao/yushou"
                  >销售发票</el-menu-item
                >
                <el-menu-item index="/home/wanglai/FaPiao/fahong"
                  >销售发票(红字)</el-menu-item
                >
                <el-menu-item index="/home/wanglai/FaPiao/caigou"
                  >采购发票</el-menu-item
                >
                <el-menu-item index="/home/wanglai/FaPiao/caigouhong"
                  >采购发票(红字)</el-menu-item
                >
              </el-submenu>
              <el-submenu index="/home/wanglai/yingshou">
                <template slot="title">应收管理</template>
                <el-menu-item index="/home/wanglai/yingshou/yushou"
                  >销售应收</el-menu-item
                >
                <el-menu-item index="/home/wanglai/yingshou/qita"
                  >其他应收</el-menu-item
                >
                <el-menu-item index="/home/wanglai/yingshou/heshi"
                  >收款核应收</el-menu-item
                >
              </el-submenu>
              <el-menu-item index="/home/wanglai/jieshou">
                <i class="el-icon-s-check"></i>
                <span>月末结转</span>
              </el-menu-item>
              <el-submenu index="/caowu">
                <template slot="title">财务统计</template>
                <el-menu-item index="/home/wanglai/caiwu/yushou"
                  >商品毛利(出库单)</el-menu-item
                >
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="/home/jichu">
            <template slot="title">
              <i class="el-icon-s-platform"></i>
              <span>基础数据</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/jichu/kehu">
                <span>客户</span>
              </el-menu-item>
              <el-menu-item index="/home/jichu/gongyingcang">
                <span>供应商</span>
              </el-menu-item>
              <el-menu-item index="/home/jichu/cangku">
                <span>仓库</span>
              </el-menu-item>
              <el-menu-item index="/home/jichu/wuliaoF">
                <span>物料分类</span>
              </el-menu-item>
              <el-menu-item index="/home/jichu/wuliao">
                <span>物料</span>
              </el-menu-item>
              <el-menu-item index="/home/jichu/jiliang">
                <span>计量单位</span>
              </el-menu-item>
              <el-menu-item index="/home/jichu/bi">
                <span>币种</span>
              </el-menu-item>
              <el-menu-item index="/home/jichu/yinhang">
                <span>银行账户</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="/xitong">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/xitong/yonghu">
                <span>用户管理</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/juese">
                <span>角色管理</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/caidan">
                <span>菜单管理</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/bumen">
                <span>部门管理</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/jueyong">
                <span>角色用户</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/bianma">
                <span>编码校验规则</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/zidian">
                <span>数据字典</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/zhiwu">
                <span>职务管理</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/bumenwo">
                <span>我的部门</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/tongxun">
                <span>通讯录</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/duoshuju">
                <span>多数据源管理</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/fenlei">
                <span>分类字典</span>
              </el-menu-item>
              <el-menu-item index="/home/xitong/tonggao">
                <span>系统通告</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="/saaaadde">
            <template slot="title">
              <i class="el-icon-s-opportunity"></i>
              <span>消息中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/samplesource/plan">
                <span>消息管理</span>
              </el-menu-item>
              <el-menu-item index="/home/samplesource/record">
                <span>模板管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main
        style="height: calc(100%); padding: 3px; background-color: #f0f3f4"
      >
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { addNavColor } from "../assets/style/configColor";
export default {
  mounted() {
    addNavColor("navblack");
  },
};
</script>

<style lang="less" scoped>
.el-container {
  height: calc(100%);
}
.el-menu-item {
  color: #000;
}
::v-deep .el-submenu__title {
  color: #000;
}
//下拉菜单主标题hover
::v-deep .el-submenu__title:hover {
  color: #1890ff !important;
  // background-color: #2b373d !important;
}

::v-deep .el-icon-arrow-down:before {
  color: var(--itemI) !important;
}

.el-aside::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.el-menu {
  border-right: none;
  // 背景+字体
  background-color: #fff;
  color: #000;
}

//滚动条里的小方块
.el-aside::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: transparent;
}

.el-aside {
  // 背景
  background-color: #fff;
  text-align: left;
}

//滚动条中心部分
.left::-webkit-scrollbar-track {
  background-color: #fff;
}

.el-aside i {
  //图标
  color: var(--itemI) !important;
  margin-right: 10px;
}

//修改子菜单背景颜色
.el-menu-item-group {
  background-color: #fff !important;

  .el-menu-item {
    background-color: #fff !important;
  }
}

// 鼠标悬浮时，选中时子菜单的样式：
.el-menu-item:hover {
  outline: 0 !important;
  color: #1890ff !important;
  // background-color: #2b373d !important;
}
//选中时
::v-deep .el-menu-item.is-active {
  color: #1890ff !important;
}
::v-deep .el-menu-item:focus {
  background-color: #fff !important;
  color: #1890ff !important;
}
.el-main {
  margin-top: 40px;
}
</style>
